<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑个人资料</title>

    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" href="../static/css/confirm.css" th:href="@{/css/confirm.css}">
    <link rel="stylesheet" href="../static/css/nav.css" th:href="@{/css/nav.css}">
    <link rel="stylesheet" href="../static/css/editPerson.css" th:href="@{/css/editPerson.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div><div style="z-index: 2000" th:replace="nav::nav" ></div>
<div class="part-a">
    <div class="photo"><i class="iconfont">&#xe8bc;</i>&nbsp;&nbsp;上传封面照片</div>
        <div class="imgcontents">
            <input type="file" class="files" name="file" style="display: none;"/>
            <span id="imgs">
                       <img  id="uimgs" th:src="${url != null ? url : '/static/img/image4.png'}"  class="img default-img" width="1001px" height="240px" />
            </span>
        </div>
    <div class="tooltip">
        <h3>上传一张图片，展示在这里</h3>
        <p>你可以使用自己的摄影作品、你喜欢的照片，<br>或是任何能展现你特质的图片。</p>
        <a href="#">哪里能找到可免费使用的优质图片？</a>
    </div>
    <img class="logo" src="../static/img/logo.png" alt="" th:src="@{/img/logo.png}"  style="width: 100px; height:100px; margin-top: 145px;
         margin-left: 878px;
         position: absolute;"/>
</div>
<div class="part-b">
    <div class="imgcontent">
        <input type="file" class="file" name="file" />
        <span id="img"><img th:src="${user.avatar}" id="uimg" class="img" width="170px" height="170px"  /></span>
    </div>
    <div class="heimu" id="photo-edit">
        <i class="iconfont">&#xe8bc;</i>
        <p>修改我的头像</p>
    </div>
</div>
<div class="part-c">
    <div class="edit-username" style="display: block;">
        <p class="name">
            <span class="realname" th:text="${user.username}"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <span class="edit" href="">修改</span>
        </p>
    </div>
    <div id="username-form"  style="display: none;">
        <label for="username">用户名</label>
        <input type="text" id="username" th:value="${user.username}" name="username"/>
        <button type="submit" id="username-save">保存</button>
        <button type="button" id="username-cancel">取消</button>
    </div>
    <div class="error-message" th:text="${result}" style="color: red; margin-left: 237px; font-size: 13px;"></div>
    <a class="back" href="personCenterArticle.html" th:href="@{/userHomepage}">返回我的主页</a>
    <ul>
        <li>性别
            <div>
                <span  id="gender" style="display: block;" th:text="${user.gender}">女</span>
                <span class="edit-link" id="gender-edit"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;✏️修改</span>
            </div>
            <div id="gender-form" style="display: none;">
                <input type="radio" id="male" name="gender" value="男" th:checked="${user.gender=='男'}">
                <label for="male">男</label>
                <input type="radio" id="female" name="gender" value="女" th:checked="${user.gender=='女'}">
                <label for="female">女</label>
                <button type="submit" id="gender-save">保存</button>
                <button type="button" id="gender-cancel">取消</button>
            </div>
        </li>
        <li>一句话介绍
            <div class="edit-link" id="intro-edit">
                <div class="title1"
                     th:text="${user.shortBio ?: '未填写'}"
                     th:style="${user.shortBio != null ? 'color: gray; font-weight: 400;' : ''}" style="color: gray">未填写
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <div class="write1" th:text="${user.shortBio != null} ? '✏️修改' : '✏️填写'"></div>
            </div>
            <input type="text" id="intro-input" maxlength="30" placeholder="最多输入30个字" style="display: none;">
            <button type="button" id="intro-save" style="display: none;">保存</button>
            <button type="button" id="intro-cancel" style="display: none;">取消</button>
        </li>
        <li>居住地
            <div class="edit-link" id="location-edit">
                <div class="title2" th:text="${user.location}?:'未设置'" th:style="${user.location}?:'color: black; font-weight: 400;'">未设置</div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <div class="write2" th:text="${user.location}?'✏️修改':'➕ 添加居住地'"></div>
            </div>
            <select id="location-input" th:value="${user.location}" style="display: none;" >
                <option value="河南" th:selected="${user.location=='河南'}">河南</option>
                <option value="河北" th:selected="${user.location=='河北'}">河北</option>
                <option value="山西" th:selected="${user.location=='山西'}">山西</option>
                <option value="辽宁" th:selected="${user.location=='辽宁'}">辽宁</option>
                <option value="吉林" th:selected="${user.location=='吉林'}">吉林</option>
                <option value="黑龙江" th:selected="${user.location=='黑龙江'}">黑龙江</option>
                <option value="江苏" th:selected="${user.location=='江苏'}">江苏</option>
                <option value="浙江" th:selected="${user.location=='浙江'}">浙江</option>
                <option value="安徽" th:selected="${user.location=='安徽'}">安徽</option>
                <option value="福建" th:selected="${user.location=='福建'}">福建</option>
                <option value="江西" th:selected="${user.location=='江西'}">江西</option>
                <option value="山东" th:selected="${user.location=='山东'}">山东</option>
                <option value="湖北" th:selected="${user.location=='湖北'}">湖北</option>
                <option value="湖南" th:selected="${user.location=='湖南'}">湖南</option>
                <option value="广东" th:selected="${user.location=='广东'}">广东</option>
                <option value="海南" th:selected="${user.location=='海南'}">海南</option>
                <option value="四川" th:selected="${user.location=='四川'}">四川</option>
                <option value="贵州" th:selected="${user.location=='贵州'}">贵州</option>
                <option value="云南" th:selected="${user.location=='云南'}">云南</option>
                <option value="陕西" th:selected="${user.location=='陕西'}">陕西</option>
                <option value="甘肃" th:selected="${user.location=='甘肃'}">甘肃</option>
                <option value="青海" th:selected="${user.location=='青海'}">青海</option>
                <option value="台湾" th:selected="${user.location=='台湾'}">台湾</option>
                <option value="内蒙古自治区" th:selected="${user.location=='内蒙古自治区'}">内蒙古自治区</option>
                <option value="广西壮族自治区" th:selected="${user.location=='广西壮族自治区'}">广西壮族自治区</option>
                <option value="西藏自治区" th:selected="${user.location=='西藏自治区'}">西藏自治区</option>
                <option value="宁夏回族自治区" th:selected="${user.location=='宁夏回族自治区'}">宁夏回族自治区</option>
                <option value="新疆维吾尔自治区" th:selected="${user.location=='新疆维吾尔自治区'}">新疆维吾尔自治区</option>
                <option value="北京市" th:selected="${user.location=='北京'}">北京</option>
                <option value="天津市" th:selected="${user.location=='天津'}">天津</option>
                <option value="上海市" th:selected="${user.location=='上海'}">上海</option>
                <option value="重庆市" th:selected="${user.location=='重庆'}">重庆</option>
                <option value="香港" th:selected="${user.location=='香港'}">香港</option>
                <option value="澳门" th:selected="${user.location=='澳门'}">澳门</option>
            </select>
            <button type="button" id="location-save" style="display: none;">保存</button>
            <button type="button" id="location-cancel" style="display: none;">取消</button>
        </li>
        <li>所在行业
            <div class="edit-link" id="industry-edit"><div class="title3" th:text="${user.industry}">未设置</div></div>
            <select id="categorySelect">
                <option value="高新科技" th:selected="${user.industry == '高新科技'}">高新科技</option>
                <option value="农业" th:selected="${user.industry == '农业'}">农业</option>
                <option value="教育" th:selected="${user.industry == '教育'}">教育</option>
                <option value="医疗" th:selected="${user.industry == '医疗'}">医疗</option>
                <option value="计算机软件" th:selected="${user.industry == '计算机软件'}">计算机软件</option>
            </select>
            <div class="edit-link" id="industry-write">&nbsp;✏️ 填写</div>
            <button type="button" id="industry-save" style="display: none;">保存</button>
            <button type="button" id="industry-cancel" style="display: none;">取消</button>
        </li>
        <li>个人简介
            <div class="edit-link" id="person-edit">
                <div class="title4" th:text="${user.bio}">未设置</div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <div class="write4" th:text="${user.bio}?'✏️修改':'✏️填写'"></div>
            </div>
            <textarea type="text" id="person-input" style="display: none;"></textarea>
            <button type="button" id="person-save" style="display: none;">保存</button>
            <button type="button" id="person-cancel" style="display: none;">取消</button>
        </li>
    </ul>
</div>
</div>
<script th:inline="javascript">
console.log("粉丝");
let post0 = [[${user}]];
console.log(post0)
console.log("背景图");
let post2 = [[${background}]];
console.log(post2)
console.log("url");
let post3 = [[${url}]];
console.log(post3)</script>
</body>
<script src="../static/js/editPerson.js" th:src="@{/js/editPerson.js}"></script>
</html>